<script setup lang="ts">
import LessonIndexList from '@/components/LessonIndexList.vue'
import type { OrderApi } from '@/apis'

defineProps<{
  data: OrderApi.RefundResp
}>()
</script>

<template>
  <view class="card">
    <view class="flex items-center justify-between">
      <text class="font-size-[30rpx]">
        订单编号：{{ data.orderId }}
      </text>
      <text class="font-size-[28rpx] color-[#4080FF]" />
    </view>
    <view v-if="data.classInfo" class="wrapper mt-[15rpx]">
      <view class="flex-row-start-center">
        <wd-tag type="primary">
          {{ useDictLabel('ClassCategoryEnum', data.classInfo.classCategory) }}
        </wd-tag>
        <view class="ml-1 flex-1 text-15px fw-500 leading-21px text-main line-1">
          {{ data.classInfo.name }}
        </view>
      </view>
      <view class="mt-[15rpx]">
        <LessonIndexList :list="data.cancelLessonIndexes" title="退课" />
      </view>
    </view>
    <view class="mt-[15rpx] flex items-center justify-between">
      <view class="font-size-[26rpx] color-[#4E5969]">
        <view>
          退款方式：{{ useDictLabel('PayTypeEnum', data.refundType) }}
        </view>
        <view class="mt-1">
          退款时间：{{ data.refundTime }}
        </view>
        <view class="mt-1">
          退款状态：{{ data.refundOff ? '已退款' : '退款中' }}
        </view>
      </view>
      <view>
        <PriceText :price="`${data.refundPrice}`" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .wrapper {
    background: #F7F8FA;
    border-radius: 16rpx;
    padding: 24rpx;
  }
</style>
